<template>
 <div>
   <avue-form :option="optionForm" v-model="parentRow"></avue-form>
   <avue-crud ref="crud" :table-loading="loading" :data="tabledata" v-model="form" :option="optionData" @row-save="rowSave" @row-update="rowUpdate"></avue-crud>
 </div>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data() {
    return {
      optionForm:{
        column:[
          {
            prop:'id',
            label:'id'
          },{
            prop:'name',
            label:'姓名'
          },
        ]
      },
      parentRow:{},
      form:{},
      loading:false,
      tabledata:[],
      optionData:{
        addBtn:false,
        addRowBtn:true,
        cellBtn:true,
        menuWidth:250,
        column:[{
          label: '父级id',
          prop:'porjectId',
        },{
          label:'省份',
          prop:'province',
          type:'select',
          cell: true,
          cascader: ['city1','city2'],
          cascaderIndex:1,
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl:`${baseUrl}/getProvince`
        },
          {
            label: '城市1',
            prop: 'city1',
            type: 'select',
            cascader: ['area'],
            cascaderIndex:1,
            cell: true,
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getCity/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择城市1',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '城市2',
            prop: 'city2',
            type: 'select',
            cascaderIndex:2,
            cell: true,
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getCity/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择城市2',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '地区',
            prop: 'area',
            cell: true,
            props: {
              label: 'name',
              value: 'code'
            },
            type: 'select',
            dicUrl: `${baseUrl}/getArea/{{key}}?province={{province}}?projectId={{porjectId}}`,
            rules: [
              {
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }
            ]
          }
        ]
      },

    }
  },
  created() {
     let _this = this ;
     this.optionData.column[1].change = ({ value, column,row }) => {
       debugger
       const bl = _this.$refs.crud.DIC.hasOwnProperty(column.prop);
    }
    this.optionData.column[2].change = ({ value, column,row }) => {
      debugger
      const bl = _this.$refs.crud.DIC.hasOwnProperty(column.prop);
    }
  },
  methods:{
    initData(row){
      this.parentId = row.id
      this.parentRow  = row ;
      console.log("******initData*******")
      this.onload() ;

    },
    onload(){
      console.log("******onload*******")
      this.loading = true
      let _this = this ;
      setTimeout(()=> {
        this.loading = false
        _this.tabledata = [{
          porjectId:_this.parentId,
          province: '110000',
          city1: '110100',
          city2: '110100',
          area: '110101',
          $cellEdit:true
        },
          {
            porjectId:_this.parentId,
            province: '110000',
            city1: '110100',
            city2: '110100',
            area: '110101',
            $cellEdit:true
          }]
      },1000)
    },
    rowSave(row,done){
      console.log("row:",row)
      done()
    },
    rowUpdate(form,index,done,loading){
      console.log("form:",form)
      done()
    }
  }
}
</script>